<template>
  <el-form class="login-container" label-position="left" :model="loginForm" :rules="rules"
           label-width="0px">
    <h3 class="login_title">{{type['part']}} {{type['name']}}登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%; " v-on:click="login" plain>登录</el-button>
    </el-form-item>
    <div class="bottom" >
      <div>忘记密码</div>
      <div v-on:click="$router.push('/userRegister')">用户注册</div>
    </div>

  </el-form>
</template>

<script>
export default {
  name: "login_page",
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"}
        ]
      },
      responseResult: []
    }
  },
  props:['type'],
  methods: {
    login () {
      const self = this;
      let param = new FormData();
      param.append("username",this.loginForm.username);
      param.append("password",this.loginForm.password);
      this.$axios({
        method: 'post',
        url: '/login',
        data: param
      }).then(successResponse => {
        let jsonString = JSON.stringify(successResponse.data);
        let jsonObj = JSON.parse(jsonString);
        if(jsonObj.success) {
          self.$store.commit(self.type['urlTail']+'login',self.loginForm);
          console.log("login success");
            var path = this.$route.query.redirect;
            var next = self.type['nextPage'];
            console.log(path,next);
            this.$router.push({path: path === '/' || path === undefined ? next : path})
        } else {
          switch (jsonObj.code) {
            case 2001:
              this.$message({
                message: "用户未登录",
                type: 'warning'
              });
              break;
            case 2003:
              this.$message({
                message: "密码错误",
                type: 'warning'
              });
              break;
            case 2007:
              this.$message({
                message: "账号不存在",
                type: 'warning'
              });
              break;
          }
        }
      })
        // .catch(failResponse => {
        //   alert("密码错误");
        // })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/common";
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    div{
      cursor: pointer;
      @include fontGradual(#3eb3e5)
    }
  }
}
</style>
